import React from 'react';
import TweenOne from 'rc-tween-one';
import { Link } from 'rc-scroll-anim';

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            phoneOpen: false,
        };
    }

    phoneClick = () => {
        const phoneOpen = !this.state.phoneOpen;
        this.setState({
            phoneOpen,
        });
    };

    render() {
        const { isMobile } = this.props;

        const { phoneOpen } = this.state;

        return (
            <TweenOne component="header" animation={{ opacity: 0, type: 'from' }} className="header2 home-page-wrapper" >
                <div className={`home-page${phoneOpen ? ' open' : ''}`} >
                    <TweenOne animation={{ x: -130, type: 'from', ease: 'easeOutQuad' }} className="header2-logo" >
                        <img width="100%" src="/images/web_title_s_1.png" alt="img" />
                    </TweenOne>
                    {isMobile && (
                        <div className="header2-mobile-menu" onClick={() => { this.phoneClick(); }}                        >
                            <em />
                            <em />
                            <em />
                        </div>
                    )}
                    <div className="header2-menu" style={isMobile ? { height: phoneOpen ? 'auto' : 0 } : {}} >
                        <Link className="menu-item" to="当前页面 ID 地址，参考如上">
                            特色介绍
                        </Link>
                        <Link className="menu-item" to="当前页面 ID 地址，参考如上">
                            导航名称
                        </Link>
                        <Link className="menu-item" to="当前页面 ID 地址，参考如上">
                            导航名称
                        </Link>
                    </div>
                </div>
            </TweenOne>
        );
    }
}

export default Header;
